<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下拉列表</title>
</head>

<body>
    <select name="" id="city">
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="成都">成都</option>
    </select>
    <script>
        let city = document.getElementById("city");
        //实例化option(key,value)
        let newOption = new Option("广州", 'GZ');
        //追加下拉列表
        city.options.add(newOption)
        console.log(city.options)
            //修改
        city.options[0].value = "大连"
        city.options[0].text = "大连"
            //移除
        city.options.remove(0)

        //获取元素
        console.log(city.value)

        //获取选中

        let options = city.options;
        for (let i = 0; i < options.length; i++) {
            if (options[i].selected) {
                console.log('你选中的是' + options[i].text)
            }
        }
    </script>

    <span>左边</span>
    <select name="" id="selLeft">
         <option value="曹操">曹操</option>
         <option value="项羽">项羽</option>
         <option value="张飞">张飞</option>
     </select>
    <span>右边</span>
    <select name="" id="selRight">
        <option value="刘备">刘备</option>
        <option value="郭德纲">郭德纲</option>
        <option value="杨过">杨过</option>
    </select>
    <button id="toLeft">to左边</button>
    <button id="toRight">to右边</button>
    <script>
        let selleft = getShowId("selLeft");
        let selright = getShowId("selRight");
        let toleft = getShowId("toLeft");
        let toright = getShowId("toRight");
        //右边追加到左边
        toright.onclick = function() {
            //左右所有的节点
            let childs = selleft.childNodes;
            for (let i = 0; i < childs.length; i++) {
                if (childs[i].selected) {
                    //节点追加到右边
                    selright.appendChild(childs[i])
                }
            }
        }

        //左边追加到右边
        toleft.onclick = function() {
            //左右所有的节点
            let childs = selright.childNodes;
            for (let i = 0; i < childs.length; i++) {
                if (childs[i].selected) {
                    //节点追加到右边
                    selleft.appendChild(childs[i])
                }
            }
        }

        //获取ID方法
        function getShowId(d) {
            return document.getElementById(d)
        }
    </script>

</body>

</html>